<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				padding: 0;
				margin: 0;
				overflow-y: scroll;
				height: 3000px;
			}
			.nav{
				width: 100%;
				height: 30px;
				position: fixed;
				
				top: -31px;
				transition: all .3s;
				text-align: center;
				background-color: pink;	
			}
			.tiem{
				width: 50px;
				height: 50px;
				margin-top: 400px;
				background-color: aqua;
				float: right;
			}
			/* .header{
				
			} */
		</style>
	</head>
	<body>
			<!-- <div class="header"> -->
				<div class="nav">我是顶部导航栏</div>
				
			<!-- </div> -->
			<div class="tiem">秒杀模块</div>
			<script>
				// 获取秒杀模块
				const tiem = document.querySelector('.tiem');
				// 获取导航栏
				const nav = document.querySelector('.nav');
				// 注册事件
				// 页面滚动是给window对象加
				window.addEventListener('scroll',function(){
					// 当页面滚动到秒杀模块的时候改变头部top值 
					// 获取html元素
					const n = document.documentElement.scrollTop;
					console.log(tiem.scrollTop);
					// 判断秒杀页面到头部的距离
					// console.log(tiem.offseTop);
					if(n>=tiem.offsetTop){
						//显示
						nav.style.top=0;
					}else{
						// 隐藏
						nav.style.top=-31+"px";
					}
				})
			</script>
	</body>
</html>